<!-- @format -->

<template>
  <div class="image-example">
    <div class="example-item">
      <div class="example-title">基础用法</div>
      <div class="example-content">
        <comp-image
          src="https://www4.bing.com//th?id=OHR.DelicateArch_ZH-CN8971667580_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp"
          :width="300"
          :height="200"
          @click="handleClick"
          @load="handleLoad"
          @error="handleError"
        />
      </div>
    </div>

    <div class="example-item">
      <div class="example-title">填充模式</div>
      <div class="example-content">
        <div class="mode-list">
          <div class="mode-item" v-for="mode in modes" :key="mode">
            <comp-image
              :src="imageUrl"
              :mode="mode"
              :width="150"
              :height="150"
            />
            <div class="mode-name">{{ mode }}</div>
          </div>
        </div>
      </div>
    </div>

    <div class="example-item">
      <div class="example-title">圆角图片</div>
      <div class="example-content">
        <comp-image :src="imageUrl" :width="150" :height="150" :radius="16" />
      </div>
    </div>

    <div class="example-item">
      <div class="example-title">圆形图片</div>
      <div class="example-content">
        <comp-image :src="imageUrl" :width="150" :height="150" circle />
      </div>
    </div>

    <div class="example-item">
      <div class="example-title">加载中提示</div>
      <div class="example-content">
        <comp-image
          :src="slowImageUrl"
          :width="150"
          :height="150"
          loading-text="加载中..."
        />
      </div>
    </div>

    <div class="example-item">
      <div class="example-title">加载失败</div>
      <div class="example-content">
        <comp-image
          src="https://example.com/not-exist.jpg"
          :width="150"
          :height="150"
          error-text="加载失败"
        />
      </div>
    </div>

    <div class="example-item">
      <div class="example-title">加载失败显示备用图</div>
      <div class="example-content">
        <comp-image
          src="https://example.com/not-exist.jpg"
          :width="150"
          :height="150"
          :error-src="imageUrl"
        />
      </div>
    </div>

    <div class="example-item">
      <div class="example-title">自定义加载中</div>
      <div class="example-content">
        <comp-image :src="slowImageUrl" :width="150" :height="150">
          <template #loading>
            <div class="custom-loading">
              <div class="custom-loading-icon"></div>
              <div class="custom-loading-text">自定义加载中...</div>
            </div>
          </template>
        </comp-image>
      </div>
    </div>

    <div class="example-item">
      <div class="example-title">自定义加载失败</div>
      <div class="example-content">
        <comp-image
          src="https://example.com/not-exist.jpg"
          :width="150"
          :height="150"
        >
          <template #error>
            <div class="custom-error">
              <div class="custom-error-icon">😢</div>
              <div class="custom-error-text">图片加载失败</div>
            </div>
          </template>
        </comp-image>
      </div>
    </div>

    <div class="example-item">
      <div class="example-title">预览图片</div>
      <div class="example-content">
        <comp-image
          ref="previewImageRef"
          :src="imageUrl"
          :width="150"
          :height="150"
        />
        <div class="example-button" @click="handlePreview">预览图片</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { ref } from 'vue';
  import CompImage from './Index.vue';

  // 导入 ImageMode 类型
  import type { ImageMode } from './types.ts';

  // 图片地址
  const imageUrl =
    'https://www4.bing.com//th?id=OHR.DelicateArch_ZH-CN8971667580_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp';

  // 模拟慢加载的图片
  const slowImageUrl =
    'https://www4.bing.com//th?id=OHR.DelicateArch_ZH-CN8971667580_1920x1080.jpg&rf=LaDigue_1920x1080.jpg&pid=hp';

  // 图片模式列表
  const modes: ImageMode[] = [
    'scaleToFill',
    'aspectFit',
    'aspectFill',
    'widthFix',
    'heightFix',
    'top',
    'bottom',
    'center',
    'left',
    'right',
  ];

  // 预览图片组件引用
  const previewImageRef = ref<InstanceType<typeof CompImage> | null>(null);

  // 图片点击事件
  const handleClick = () => {
    console.log('图片被点击');
    uni.showToast({
      title: '图片被点击',
      icon: 'none',
    });
  };

  // 图片加载完成事件
  const handleLoad = (detail: { width: number; height: number }) => {
    console.log('图片加载完成', detail);
  };

  // 图片加载失败事件
  const handleError = () => {
    console.log('图片加载失败');
  };

  // 预览图片
  const handlePreview = () => {
    previewImageRef.value?.preview();
  };
</script>

<style lang="scss" scoped>
  .image-example {
    padding: 16px;

    .example-item {
      margin-bottom: 24px;

      .example-title {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 12px;
      }

      .example-content {
        background-color: #f5f7fa;
        padding: 16px;
        border-radius: 4px;
      }

      .example-button {
        margin-top: 12px;
        padding: 6px 12px;
        background-color: #409eff;
        color: #fff;
        border-radius: 4px;
        font-size: 14px;
        display: inline-block;
      }
    }

    .mode-list {
      display: flex;
      flex-wrap: wrap;
      margin: -8px;

      .mode-item {
        margin: 8px;
        text-align: center;

        .mode-name {
          margin-top: 8px;
          font-size: 12px;
          color: #606266;
        }
      }
    }

    .custom-loading,
    .custom-error {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
    }

    .custom-loading-icon {
      width: 40rpx;
      height: 40rpx;
      border: 3rpx solid #409eff;
      border-color: #409eff #409eff #409eff transparent;
      border-radius: 50%;
      animation: custom-rotate 1s linear infinite;
    }

    .custom-loading-text {
      margin-top: 8rpx;
      font-size: 24rpx;
      color: #409eff;
    }

    .custom-error-icon {
      font-size: 40rpx;
    }

    .custom-error-text {
      margin-top: 8rpx;
      font-size: 24rpx;
      color: #f56c6c;
    }
  }

  @keyframes custom-rotate {
    from {
      transform: rotate(0deg);
    }
    to {
      transform: rotate(360deg);
    }
  }
</style>
